<template>
  <div>
    <h3>Parent</h3>
    <h5>{{ msg }}</h5>
    <h5>
      vuex <span style="color: red">{{ count }}</span>
    </h5>
    <h5>
      getters <span style="color: red">{{ doubleCount }}</span>
    </h5>
    <button @click="add">增加</button>
    <!-- <m-child msg="msg from parent" @showMsg="showMsg"></m-child> -->
    <m-child :msg="'msg from parent'" @showMsg="showMsg" ref="child"></m-child>
  </div>
</template>

<script>
// 两种写法有什么区别
import MChild from './ChildPage.vue'
import { mapState, mapGetters } from 'vuex'
// import { mapState } from 'vuex'
// import { MChild } from "./Child.vue";

export default {
  computed: {
    ...mapState({
      count: (state) => state.text.count,
    }),
    // doubleCount() {
    //   return this.$store.getters.doubleCount
    // },
    ...mapGetters(['doubleCount']),
  },
  data() {
    return {
      msg: '',
    }
  },
  components: {
    MChild,
  },
  methods: {
    showMsg(val) {
      this.msg = val
    },
    add() {
      this.$store.dispatch('delayAdd')
    },
  },
  mounted() {
    console.log('$children', this.$children)
    console.log('ref', this.$refs.child)
    let strChild = JSON.stringify(this.$refs.child)
    console.log('ref', strChild)
    console.log('ref', JSON.parse(strChild))
    console.log('ref', this.$refs.child[1])
  },
}
</script>

<style scoped></style>
